<template>
  <div class="mail-setting-page">
    <div class="setting-page-header">
      <div class="header-title">通用</div>
    </div>
    <div class="setting-page-body">
      <div class="xmail-ui-float-scroll">
        <div class="ui-float-scroll-body setting-page-tab" tabindex="0">
          <div class="setting-part-title">个人信息</div>
          <div class="setting-item-wrap mail-setting-main-profile">
            <div class="setting-item-row setting-row-top-align">
              <div class="setting-item-name">我的资料卡</div>
              <div class="mail-setting-profile-card profile-card-show-edit-btn">
                <div class="basics-info">
                  <!-- 用户信息 -->
                  <div class="basic-right">
                    <div class="basic-nick">
                      <div class="nick-text">{{ userInfo.user_nick }}</div>
                      <div
                        class="xmail-ui-btn ui-btn-size28 ui-btn-them-clear-blue edit-btn"
                      >
                        <!-- <span
                          class="xmail-ui-icon ui-btn-icon"
                          style="width: 20px; height: 20px"
                          >📓</span
                        >
                        <div class="ui-btn-text">编辑</div> -->
                      </div>
                    </div>
                    <div class="basic-account">
                      {{ userInfo.phone_number }}@kk.com
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="setting-item-wrap">
            <!-- <div class="setting-item-row">
              <div class="setting-item-name">生日</div>

              <div
                class="xmail-ui-btn ui-btn-size36 ui-btn-ellipsis ui-btn-border ui-btn-them-clear-gray ui-btn-text-group"
                style="width: 120px; margin-right: 12px"
              >
                <div class="ui-btn-text">1月</div>
                <span
                  class="xmail-ui-icon ui-btn-down-icon"
                  style="width: 8px; height: 6px; color: var(--base_gray_050)"
                >
                  ▼▲
                </span>
              </div>
              <div
                class="xmail-ui-btn ui-btn-size36 ui-btn-ellipsis ui-btn-border ui-btn-them-clear-gray ui-btn-text-group"
                style="width: 120px; margin-right: 12px"
              >
                <div class="ui-btn-text">1日</div>
                <span
                  class="xmail-ui-icon ui-btn-down-icon"
                  style="width: 8px; height: 6px; color: var(--base_gray_050)"
                >
                  ▼▲
                </span>
              </div>
            </div> -->
          </div>

          <div class="setting-item-wrap">
            <div class="setting-item-row setting-row-top-align">
              <div class="setting-item-name">账号昵称</div>
              <div class="mail-setting-accounts">
                <div class="active-account-table">
                  <div class="table-header">
                    <div class="td-email">邮箱地址</div>
                    <div class="td-type">类型</div>
                    <div class="td-nick">昵称</div>
                    <div class="td-operate">操作</div>
                  </div>
                  <div class="table-row">
                    <div class="td-email">
                      <span>{{ userInfo.phone_number }}@kk.com</span>
                    </div>
                    <div class="td-type">康康邮箱</div>
                    <div class="td-nick">{{ userInfo.user_nick }}</div>
                    <div class="td-operate">
                      <div
                        class="xmail-ui-hyperlink"
                        @click="showEditDialog = true"
                      >
                        编辑
                      </div>
                    </div>
                  </div>
                </div>
                <div></div>
                <!-- <div class="xmail-ui-hyperlink" style="margin-top: 16px">
                  前往账号管理
                </div> -->
              </div>
            </div>
          </div>
          <div class="setting-part-divider"></div>
        </div>
      </div>
    </div>

    <div v-if="showEditDialog" tabindex="0" style="opacity: 1">
      <div class="ui-dialog-mask"></div>
      <div
        class="ui-dialog-body setting-edit-account-dialog"
        tabindex="0"
        style="min-width: 420px"
      >
        <div class="ui-dialog-header">
          <!-- 这里显示用户手机号 -->
          <div class="ui-dialog-title">{{ userInfo.phone_number }}@kk.com</div>
        </div>
        <div class="ui-dialog-content">
          <div class="edit-account-table">
            <div class="table-row nick-row">
              <!-- 修改用户昵称并同步给数据库 -->
              <div class="label-td" style="width: 68px">修改昵称</div>
              <div class="value-td">
                <div class="xmail-ui-input ui-input-border nick-input">
                  <input
                    class="ui-input-element"
                    maxlength="1024"
                    aria-autocomplete="none"
                    v-model="userInfo.user_nick"
                  />
                </div>
                <div class="input-error-tips"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui-dialog-footer">
          <div class="ui-dialog-footer-slot-left"></div>
          <div class="ui-dialog-footer-btns">
            <div
              class="xmail-ui-btn ui-btn-size36 ui-btn-border ui-btn-them-blue ui-dialog-footer-btn"
              @click="saveChanges"
            >
              <div class="ui-btn-text">确定</div>
            </div>
            <div
              class="xmail-ui-btn ui-btn-size36 ui-btn-border ui-btn-them-clear-gray ui-dialog-footer-btn"
              @click="showEditDialog = false"
            >
              <div class="ui-btn-text">取消</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import axios from "axios";
import { defineComponent, ref, onMounted } from "vue";

// 定义 UserInfo 接口
interface UserInfo {
  phone_number: string;
  user_nick: string;
  id: number; // 添加 id 字段
}

export default defineComponent({
  setup() {
    // 使用 UserInfo 接口类型初始化 userInfo
    const userInfo = ref<UserInfo>({ id: 0, phone_number: "", user_nick: "" });
    const showEditDialog = ref(false);

    onMounted(() => {
      // 从本地存储中获取用户信息
      const storedUserInfo = localStorage.getItem("userInfo");
      if (storedUserInfo) {
        try {
          // 解析存储的信息并赋值给 userInfo
          const parsedUserInfo = JSON.parse(storedUserInfo) as UserInfo;
          userInfo.value = parsedUserInfo;
        } catch (error) {
          console.error("解析用户信息出错:", error);
        }
      }
    });

    const saveChanges = async () => {
      try {
        // 发送请求到后端 API
        const response = await axios.post(
          "http://localhost:3000/api/update-nickname",
          {
            user_id: userInfo.value.id,
            user_nick: userInfo.value.user_nick,
          }
        );

        if (response.data.success) {
          // 更新本地存储
          localStorage.setItem("userInfo", JSON.stringify(userInfo.value));
          // 关闭对话框
          showEditDialog.value = false;
          console.log("昵称更新成功");
        } else {
          console.error("更新昵称失败:", response.data.message);
        }
      } catch (error) {
        console.error("请求出错:", error);
      }
    };

    return {
      userInfo,
      showEditDialog,
      saveChanges,
    };
  },
});
</script>

<style scoped>
.mail-setting-page {
  --setting-table-max-w: 1500px;
  --setting-content-panel-w: 600px;
  --setting-table-head-padding: 5px 12px;
  --setting-table-body-padding: 10px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mail-setting-page .setting-page-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 24px;
  margin: 0 1px;
  border-bottom: 1px solid var(--base_gray_007);
  box-sizing: border-box;
}

.mail-setting-page .setting-page-header .header-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--base_gray_100);
}

.mail-setting-page .setting-page-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-setting-page .setting-page-tab {
  flex-grow: 1;
  padding: 24px 24px 68px 24px;
  box-sizing: border-box;
}

.mail-setting-page .setting-page-tab {
  flex-grow: 1;
  padding: 24px 24px 68px 24px;
  box-sizing: border-box;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.mail-setting-page .setting-part-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  height: 70px;
  color: var(--base_gray_100);
}

.mail-setting-page .setting-page-tab > :first-child.setting-part-title {
  margin-top: -24px;
}

.mail-setting-page .setting-item-wrap {
  padding-bottom: 24px;
  box-sizing: border-box;
}

.mail-setting-main-profile {
  padding-bottom: 16px !important;
}

.mail-setting-page .setting-item-row.setting-row-top-align {
  align-items: flex-start;
}

.mail-setting-page .setting-item-row {
  display: flex;
  align-items: center;
  padding-left: 152px;
}

.mail-setting-page .setting-item-name {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  width: 152px;
  height: 36px;
  margin-left: -152px;
  color: var(--base_gray_100);
  padding: 8px 12px 8px 0;
  box-sizing: border-box;
}

.mail-setting-profile-card.profile-card-show-edit-btn {
  padding-top: 12px;
}

.mail-setting-profile-card {
  width: 100%;
  max-width: 384px;
  border-radius: 6px;
  padding: 20px;
  border: 1px solid var(--base_gray_010);
  box-sizing: border-box;
  overflow: hidden;
}

.mail-setting-profile-card .basics-info {
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 头像 */
.mail-setting-profile-card.profile-card-show-edit-btn .user-avatar {
  margin-top: 8px;
}

.xmail-ui-avatar.ui-avatar-size36 {
  --size: 36px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.xmail-ui-avatar {
  --size: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background-size: 100% 100%;
}

.mail-setting-profile-card.profile-card-show-edit-btn .basic-right {
  padding-top: 8px;
}

.xmail-ui-avatar.ui-avatar-border::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid var(--base_gray_005);
  box-sizing: border-box;
  border-radius: 50%;
}

.xmail-ui-avatar .ui-avatar-img {
  flex-grow: 1;
  height: 100%;
}

img {
  border: 0px;
}

/* 卡片右侧 */
.mail-setting-profile-card .basics-info .basic-right {
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  padding-left: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.mail-setting-profile-card .basics-info .basic-nick {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding-bottom: 2px;
  box-sizing: border-box;
}

.mail-setting-profile-card .basics-info .nick-text {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  color: var(--base_gray_100);
}

.mail-setting-profile-card.profile-card-show-edit-btn .edit-btn {
  margin: -4px 0 -4px 8px;
}
.mail-setting-profile-card.profile-card-show-edit-btn .edit-btn:hover {
  background-color: #a8cffb;
}

.xmail-ui-btn.ui-btn-size28 {
  font-size: 13px;
  line-height: 18px;
  height: 28px;
  min-width: 28px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-blue {
  --hover-front-bg: var(--theme_alpha_010);
  --active-front-bg: var(--theme_alpha_025);
  --color: var(--theme_darken_1);
  --icon-color: var(--theme_darken_1);
  --border-color: var(--theme_lighten_4);
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
  left: 8px;
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-setting-profile-card .basics-info .basic-account {
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--base_gray_050);
}

.mail-setting-page .setting-item-wrap {
  padding-bottom: 24px;
  box-sizing: border-box;
}

.xmail-ui-btn.ui-btn-size36 {
  font-size: 14px;
  line-height: 20px;
  height: 36px;
  min-width: 36px;
  padding: 0 calc(10px - var(--border-width));
  border-radius: 6px;
}

.xmail-ui-btn.ui-btn-ellipsis {
  flex-shrink: 1;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn.ui-btn-text-group .ui-btn-text {
  flex-grow: 1;
}

.xmail-ui-btn.ui-btn-ellipsis .ui-btn-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-btn .ui-btn-down-icon {
  position: relative;
  color: var(--icon-color);
  margin-left: var(--icon-margin);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 账号昵称/签名 */
.mail-setting-page .setting-item-row.setting-row-top-align {
  align-items: flex-start;
}

.mail-setting-accounts {
  --td-padding: var(--setting-table-body-padding);
  flex-grow: 1;
}

.mail-setting-accounts .active-account-table {
  width: 100%;
  max-width: 1000px;
  border: 1px solid var(--base_gray_010);
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.mail-setting-accounts .active-account-table .table-header {
  --td-padding: var(--setting-table-head-padding);
  font-size: 13px;
  line-height: 18px;
  display: flex;
  align-items: center;
  color: var(--base_gray_050);
  background: var(--base_gray_003);
}

.mail-setting-accounts .active-account-table .td-email {
  width: 30%;
  padding: var(--td-padding);
  box-sizing: border-box;
}

.mail-setting-accounts .active-account-table .td-type {
  width: 17%;
  padding: var(--td-padding);
  box-sizing: border-box;
}

.mail-setting-accounts .active-account-table .td-nick {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 22%;
  padding: var(--td-padding);
  box-sizing: border-box;
}

.mail-setting-accounts .active-account-table .td-sign {
  width: 16%;
  padding: var(--td-padding);
  box-sizing: border-box;
}

.mail-setting-accounts .active-account-table .td-operate {
  display: inline-flex;
  align-items: center;
  width: 15%;
  min-width: 100px;
  padding: var(--td-padding);
  box-sizing: border-box;
}

.mail-setting-accounts .active-account-table .table-row {
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: var(--base_gray_100);
  border-bottom: 1px solid var(--base_gray_010);
}

.mail-setting-accounts .active-account-table .table-row:last-child {
  border-bottom: none;
}

.xmail-ui-hyperlink {
  --color: var(--accent_blue_darken_1);
  --hover-color: var(--accent_blue_lighten_1);
  --active-color: var(--accent_blue_lighten_2);
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color);
  box-sizing: border-box;
  text-underline-offset: 3px;
}

.xmail-ui-hyperlink:not(.ui-hyperlink-is-text) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.mail-setting-page .setting-part-divider {
  width: 100%;
  height: 1px;
  background: var(--base_gray_007);
}

.xmail-ui-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.xmail-ui-dialog .ui-dialog-mask {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--mask_gray_030);
}

.xmail-ui-dialog .ui-dialog-body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  background: var(--base_white_100);
  border-radius: 8px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.setting-edit-account-dialog {
  width: 520px;
}

.xmail-ui-dialog .ui-dialog-header {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--base_gray_100);
  padding: 24px 24px 0 24px;
}

.xmail-ui-dialog .ui-dialog-header .ui-dialog-title {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 24px;
  box-sizing: border-box;
}

.xmail-ui-dialog .ui-dialog-content {
  font-size: 16px;
  line-height: 22px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: var(--base_gray_080);
  padding: 16px 24px 24px 24px;
  word-wrap: break-word;
  box-sizing: border-box;
  overflow: hidden;
}

.setting-edit-account-dialog .edit-account-table {
  padding-top: 16px;
}

.setting-edit-account-dialog .edit-account-table .table-row.nick-row {
  align-items: flex-start;
  padding-bottom: 0;
}

.setting-edit-account-dialog .edit-account-table .table-row {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.setting-edit-account-dialog .edit-account-table .table-row.nick-row .label-td {
  padding-top: 8px;
}

.setting-edit-account-dialog .edit-account-table .label-td {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  color: var(--base_gray_080);
  padding-right: 12px;
  box-sizing: border-box;
}

.setting-edit-account-dialog .edit-account-table .value-td {
  flex-grow: 1;
}

.setting-edit-account-dialog .edit-account-table .value-td .nick-input {
  width: 100%;
}

.xmail-ui-input {
  --border-color: transparent;
  --clear-btn-display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--bg_white_web);
  overflow: hidden;
}

.xmail-ui-input.ui-input-border {
  --border-color: var(--base_gray_010);
}

.xmail-ui-input .ui-input-element {
  font-size: 14px;
  line-height: 20px;
  flex-grow: 1;
  min-width: 0;
  color: var(--base_black);
  border: none;
  outline: none;
  padding: 0;
  margin: 8px;
  background: transparent;
}

body input,
body textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Helevetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
}

.xmail-ui-dialog .ui-dialog-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 18px 24px 24px;
}

.xmail-ui-dialog .ui-dialog-footer .ui-dialog-footer-slot-left {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.xmail-ui-dialog .ui-dialog-footer .ui-dialog-footer-btns {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.xmail-ui-dialog .ui-dialog-footer .ui-dialog-footer-btn {
  min-width: 80px;
  margin: 0 6px;
}

.xmail-ui-btn.ui-btn-them-blue.ui-btn-size32,
.xmail-ui-btn.ui-btn-them-blue.ui-btn-size36 {
  --shadow: var(--material_BlueButton_Large);
}

.xmail-ui-btn.ui-btn-size36 {
  font-size: 14px;
  line-height: 20px;
  height: 36px;
  min-width: 36px;
  padding: 0 calc(10px - var(--border-width));
  border-radius: 6px;
}

.xmail-ui-btn.ui-btn-them-blue {
  --base-bg: var(--theme_primary);
  --hover-front-bg: var(--base_white_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_white_100);
  --icon-color: var(--base_white_100);
  --border-color: var(--theme_darken_2);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

/* 遮罩层样式 */

/* 对话框主体样式 */
.ui-dialog-body.setting-edit-account-dialog {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1001;
  position: fixed; /* 使用固定定位 */
  top: 50%; /* 顶部距离为页面高度的 50% */
  left: 50%; /* 左侧距离为页面宽度的 50% */
  transform: translate(
    -50%,
    -50%
  ); /* 向上向左移动自身宽度和高度的 50%，实现居中 */
}

/* 对话框头部样式 */
.ui-dialog-header {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.ui-dialog-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 对话框内容样式 */
.ui-dialog-content {
  margin-bottom: 20px;
}

.edit-account-table .table-row.nick-row {
  display: flex;
  align-items: center;
}

.label-td {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.value-td .xmail-ui-input.ui-input-border.nick-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  width: 200px;
}

.value-td .xmail-ui-input.ui-input-border.nick-input input.ui-input-element {
  border: none;
  outline: none;
  width: 100%;
}

/* 对话框底部样式 */
.ui-dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.ui-dialog-footer-btns .xmail-ui-btn {
  margin-left: 10px;
}

.ui-dialog-footer-btns .xmail-ui-btn.ui-btn-them-blue {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.ui-dialog-footer-btns .xmail-ui-btn.ui-btn-them-blue:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.ui-dialog-footer-btns .xmail-ui-btn.ui-btn-them-clear-gray {
  background-color: #f8f9fa;
  color: #333;
  border-color: #ccc;
}

.ui-dialog-footer-btns .xmail-ui-btn.ui-btn-them-clear-gray:hover {
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
</style>
